import React from 'react';
import { Link } from 'react-router-dom';
import { Menu } from 'antd';
import { LogoHeader } from '../../components/Header';
import {
  HelpHome,
  Byc,
} from '../../components/Help';

import styles from './index.module.less';

export default class Help extends React.Component {
  state = {
    active: 'helpHome',
  };

  onMenuSelect = selectedMenu => {
    this.setState({
      active: selectedMenu.key,
    });
  };

  render() {
    const { active } = this.state;

    const rightContent = (
      <div className={styles.menuBox}>
        <Link className={styles.menuItem} to='/'>首页</Link>
        <Link className={styles.menuItem} to='/'>买家中心</Link>
        <Link className={styles.menuItem} to='/'>卖家中心</Link>
      </div>
    );

    return (
      <React.Fragment>
        <LogoHeader rightContent={rightContent} />
        <div className={styles.content}>
          <div className={`${styles.box} ${styles.clearfix}`}>
            <div className={styles.leftBox}>
              <Menu
                onClick={this.onMenuSelect}
                style={{ width: 185 }}
                defaultSelectedKeys={[ 'helpHome' ]}
                mode='inline'
              >
                <Menu.Item key='helpHome'>帮助首页</Menu.Item>
                <Menu.SubMenu key='accountProblem' title='账号问题'>
                  <Menu.Item key='2'>Option 1</Menu.Item>
                  <Menu.Item key='3'>Option 2</Menu.Item>
                </Menu.SubMenu>
                <Menu.SubMenu key='sellerNavigator' title='卖家指南'>
                  <Menu.Item key='4'>Option 1</Menu.Item>
                  <Menu.Item key='5'>Option 2</Menu.Item>
                </Menu.SubMenu>
                <Menu.SubMenu key='buyerNavigator' title='买家指南'>
                  <Menu.Item key='buyerCommonProblem'>买家常见问题</Menu.Item>
                  <Menu.Item key='buyerPurchaseOfSteel'>采购钢材</Menu.Item>
                  <Menu.Item key='buyerInquirySheetManager'>询价单管理</Menu.Item>
                  <Menu.Item key='buyerGuarantee'>买家保障</Menu.Item>
                </Menu.SubMenu>
                <Menu.Item key='10'>交易支付</Menu.Item>
              </Menu>
            </div>
            <div className={styles.rightBox}>
              {
                active === 'helpHome' && <HelpHome />
              }
              {
                active === 'buyerCommonProblem' && <Byc />
              }
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
